昨天講解了父子元件溝通問題，而今天我們的目標是透過介紹內建輸入元件時提到的 InputBase<TValue> 來建立客製化輸入元件。
元件只需要繼承 InputBase<TValue> 即可，如：
@inherits InputBase<string>
這樣一來，我們的元件就能夠使用 InputBase<TValue> 的所有成員了。
| 名稱 | 類別 | 用途 |
|---|---|---|
| AdditionalAttributes | IReadOnlyDictionary<string, object> |
用來設定或取得額外屬性，搭配 @attributes 來使用。 |
| Value | TValue |
用於設定或取得值，需與雙向綁定一起使用 |
| ValueChanged | EventCallback<TValue> |
用於設定或取得綁定值的回呼 |
| ValueExpression | Expression<Func<TValue>> |
用於設定或取得綁定值的表達式 |
| EditContext | EditContext |
用於取得關聯的 EditContext |
| FieldIdentifier | FieldIdentifier |
用於取的綁定值的 FieldIdentifier(也就是 Model 與 FieldName) |
| CurrentValue | TValue |
用於設定或取得當前的值 |
| CurrentValueAsString | string |
用於設定或取得當前的值，以 FormatValueAsString 傳回的字串表示。 |
| CssClass | string |
用於取得外部給元件的 CssClass。 |
| 名稱 | 傳回值 | 用途 |
|---|---|---|
| FormatValueAsString(TValue value) | string | 將 TValue 值格式化成字串 |
| TryParseValueFromString(string value, out TValue result, out string validationErrorMessage) | bool | 用於解析輸入的內容，並轉換成特定字串；當解析失敗時，能提供錯誤訊息。 |
而這邊簡單的做一個輸入框，只要是輸入英文，input 事件發生後都會被強制轉換成大寫：
@inherits InputBase<string>
<input @attributes="AdditionalAttributes"
class="@CssClass"
@bind="CurrentValueAsString" />
@code {
protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
{
var valid = !string.IsNullOrEmpty(value);
result = valid ? value.ToUpper() : null;
validationErrorMessage = valid ? "" : "Invalid Value";
return valid;
}
}
使用時就像內建的輸入元件一樣，只能在 EditForm 中使用，要注意的一點是 TryParseValueFromString 方法是抽象的，所以我們只必須要自己實作解析方法即可。
以上就是客製化輸入元件的方法，透過繼承 InputBase<TValue> 就可以簡單辦到，但如果只是想在 InputText 中添加內容，也是可以直接繼承 InputText 與其它的內建輸入元件唷。
感謝大家的閱讀，先祝大家中秋節快樂，我們明天見。
iThome鐵人賽
看影片追技術